<template>
	<div class="hello">
		<h1>{{ msg }}</h1>

		<h2>Essential Links</h2>
		<ul>
			<li>
				<a href="https://vuejs.org" target="_blank">

					Core Docs1233333399
				</a>
			</li>
			<li>
				<a href="https://forum.vuejs.org" target="_blank">
					Forum
				</a>
			</li>
			<li>
				<a href="https://chat.vuejs.org" target="_blank">
					Community Chat
				</a>
			</li>
			<li>
				<a href="https://twitter.com/vuejs" target="_blank">
					Twitter
				</a>
			</li>
			<br>
			<li>
				<a href="http://vuejs-templates.github.io/webpack/" target="_blank">
					Docs for This Template
				</a>
			</li>
		</ul>
		<h2>Ecosystem</h2>
		<ul>
			<li>
				<a href="http://router.vuejs.org/" target="_blank">
					vue-router
				</a>
			</li>
			<li>
				<a href="http://vuex.vuejs.org/" target="_blank">
					vuex
				</a>
			</li>
			<li>
				<a href="http://vue-loader.vuejs.org/" target="_blank">
					vue-loader
				</a>
			</li>
			<li>
				<a href="https://github.com/vuejs/awesome-vue" target="_blank">
					awesome-vue
				</a>
			</li>
		</ul>

	</div>
</template>

<script>
	/*注意：在一个模块中export default只允许向外暴漏一次，可以使用任意的变量来接收
		 使用export向外暴漏的成员只能使用{}的形式接收，这种形式叫做按需到处如：export var titl·e=‘小孩子’，接收的时候用{title}
		 * */
	export default { //在ES6中使用export default和export 向外暴漏成员。在main.js使用import导入
		name: 'HelloWorld',
		data() { //注意：组件中的data必须是函数
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--scoped作用域，-->
<!--普通的style标签只支持普通样式。如果想要启用sass、less，需要为style元素设置lang属性，如lang='sass'-->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
</style>